<html>
  <head>
    <meta charset="UTF-8">
    <title>qrcodeHelper</title>
    <link rel="stylesheet" href="./lib/style.css">
    <script type="text/javascript" src="./lib/adapter.min.js"></script>
    <script type="text/javascript" src="./lib/vue.min.js"></script>
    <script type="text/javascript" src="./lib/instascan.min.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?9e415377579eb14c0ab25b0b07226f61";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
</script>

  </head>
  <body>
    <div id="app">
      
      <div class="preview-container">
        <video id="preview"></video>
      </div>
      <div class="sidebar">
        <section class="title">
          <h2 style="text-align:center">识别二维码</h2>
        </section>
        <section class="cameras">
          <h2 style="text-align:center">摄像头状态</h2>
          <ul>
            <li v-if="cameras.length === 0" class="empty">没有找到摄像头</li>
            <li v-for="camera in cameras">
              <span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active">{{ formatName(camera.name) }}</span>
              <span v-if="camera.id != activeCameraId" :title="formatName(camera.name)">
                <a @click.stop="selectCamera(camera)">{{ formatName(camera.name) }}</a>
              </span>
            </li>
          </ul>
        </section>
        <section class="scans">
          <h2 style="text-align:center">扫描结果</h2>
          <ul v-if="scans.length === 0">
            <li class="empty">未扫描</li>
          </ul>
          <transition-group name="scans" tag="ul">
            <li id="result" v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li>
          </transition-group>
          <button type="button" id="cpy_btn" onclick="copy()" style="width:220px;height:60px;display:block;margin:0 auto">拷贝</button>
        </section>
      </div>
    </div>
    <script type="text/javascript" src="./lib/app.js"></script>
  </body>
</html>
<script>
  function copy(){
    var val =  document.getElementById('result');
    window.getSelection().selectAllChildren(val);
    document.execCommand("Copy");
    var ui = document.getElementById("cpy_btn");
        ui.innerHTML = "已拷贝";
        setTimeout(function(){ 
            ui.innerHTML = "拷贝";
        },1000);
  }
</script>
